<template>

<div class="school">
    <div class="box-card">
       <!-- <div  class="title"  @click="toggleOpen">
            <span>基础设施</span>
            <i v-if="progress==='1'"><el-tag type="success">已完善</el-tag></i>
            <i v-if="progress==='0'"><el-tag type="danger">待完善</el-tag></i>
            <div class="head-right">
                <el-button type="text" @click="submit" v-if="!disabled">保存</el-button>
                <span class="toggle" @click="toggleOpen">
                    <i class="el-icon-arrow-up" v-if="open"></i>
                    <i class="el-icon-arrow-down"  v-else></i>
                </span>

            </div>
        </div>-->
        <item-header
                title="基础设施"
                :open="open"
                :progress="progress"
                :disabled="disabled"
                @submit="submit"
                @toggleOpen="toggleOpen"
                @changeDisabled="changeDisabled"
        />
        <div class="text item" v-if="open">
            <el-form :inline="true" label-position="top"   :rules="rules" ref="form" :model="data.college_info">

                <el-form-item label="1.有无危险品仓库" prop="facilities_param1">
                    <el-radio-group v-model="data.college_info.facilities_param1" :disabled="disabled">
                        <el-radio label="有"></el-radio>
                        <el-radio label="无"></el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item style="margin-left:30px;" label="管理部门" label-width="80px"  prop="facilities_param2" v-if="data.college_info.facilities_param1==='有'">
                    <el-input  v-model="data.college_info.facilities_param2"  :disabled="disabled" />
                </el-form-item>


                <br>

                <el-form-item label="2.有无危废中转站" prop="facilities_param3">
                    <el-radio-group v-model="data.college_info.facilities_param3" :disabled="disabled">
                        <el-radio label="有"></el-radio>
                        <el-radio label="无"></el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item v-if="data.college_info.facilities_param3==='有'" prop="facilities_param4" style="margin-left:30px;" label="管理部门" label-width="80px"   >
                    <el-input  v-model="data.college_info.facilities_param4"  :disabled="disabled" />
                </el-form-item>

                <br>

                <el-form-item label="3.有无实验室安全管理信息系统" prop="facilities_param5">
                    <el-radio-group v-model="data.college_info.facilities_param5" :disabled="disabled">
                        <el-radio label="有"></el-radio>
                        <el-radio label="无"></el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item v-if="data.college_info.facilities_param5==='有'" prop="facilities_param6" style="margin-left:30px;" label="管理部门" label-width="80px"   >
                    <el-input  v-model="data.college_info.facilities_param6"  :disabled="disabled" />
                </el-form-item>

                <br>

                <el-form-item label="4.有无危险品全过程管理信息系统（包含采购、运输、储存、使用、转移、处置等流程）" prop="facilities_param7">
                    <el-radio-group v-model="data.college_info.facilities_param7" :disabled="disabled">
                        <el-radio label="有"></el-radio>
                        <el-radio label="无"></el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item v-if="data.college_info.facilities_param7==='有'" prop="facilities_param8" style="margin-left:30px;" label="管理部门" label-width="80px"   >
                    <el-input  v-model="data.college_info.facilities_param8"  :disabled="disabled" />
                </el-form-item>

                <br>




            </el-form>
        </div>
    </div>

</div>


</template>

<script>
    import itemHeader from './item-header'
    export default {
        components:{itemHeader},
        name: "item1",
        props:['formUnit', 'is_disabled','expend'],
        computed:{
            progress(){

                return this.data.college_info.progress[this.index]
            }
        },
        watch: {
            formUnit(val) {
                this.data = this.formUnit;
            }
        },
        data(){
            return {
                disabled:this.is_disabled,
                complete:false,
                // data:this.formUnit,
                data:JSON.parse(JSON.stringify(this.formUnit)),
                open:this.expend,
                index:5,
                rules: {
                    "facilities_param1": [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param2: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param3: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param4: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param5: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param6: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param7: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param8: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param9: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param10: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    facilities_param11: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ]
                },
            }
        },
        methods:{
            addItem(){

                this.data.college_info.facilities_param1_list.push({value:''})
            },
            removeItem(item) {
                var index = this.data.college_info.facilities_param1_list.indexOf(item)
                if (index !== -1) {
                    this.data.college_info.facilities_param1_list.splice(index, 1)
                }
            },
            toggleOpen(){
                this.open = !this.open
            },
            changeDisabled(val){
                if (val){
                    this.data =  JSON.parse(JSON.stringify(this.formUnit))
                }
                this.disabled = val
            },
            submit(e){
                window.event? window.event.cancelBubble = true : e.stopPropagation()
                this.$refs['form'].validate((valid) => {
                    if (valid) {

                        this.$emit('itemSave',this.data,this.index)
                        this.disabled = true


                    }
                })
            }
        }
    }
</script>

<style scoped>
    .toggle{
        cursor: pointer;
        display:inline-block;
    }
    .title .toggle i{
        font-size:20px;
        margin-left:0px;
    }
    .title{
        background: #eee;
        padding:0 20px;
        position:relative;
        margin-bottom:30px;
        cursor: pointer;
    }
    .title:hover{
        background: #e6e6e6;

    }
    .title i{
        font-size:12px;
        margin-left:20px;
        font-style: normal;
        color:#999;
    }
    .title .head-right{
        position:absolute;
        right:20px;
        top:1px;
    }
    .item{
        padding-left:30px;
    }
</style>
